<template>
  <div class="sm-sman-smanagementGoods">
    <div class="sm-sman-leftInfo">
      <div>工作包信息</div>
      <ul>
        <li v-for="(value, index) in gzbInfo" :key="index">
          <p>待分拣物料信息</p>
          <p>
            工作包条码：<span style="margin-left: 3px">{{ value.aoCode }}</span>
          </p>
          <p v-if="!value.mesCheckQualiticationId">
            条码：<span style="margin-left: 3px">{{ value.barcode }}</span>
          </p>
          <p v-if="value.mesCheckQualiticationId">
            合格证号：<span style="margin-left: 3px">{{ value.mesCheckQualiticationId }}</span>
          </p>
          <p>
            图号：<span style="margin-left: 3px">{{ value.itemCode }}</span>
          </p>
          <p>
            物料名称：<span style="margin-left: 3px">{{ value.itemName }}</span>
          </p>
          <!-- <p>
            质量编号：<span style="margin-left: 3px">{{
              value.qualityCode
            }}</span>
          </p> -->
          <p>
            物料数量：<span style="margin-left: 3px">{{ value.itemQty }}</span>
          </p>
        </li>
      </ul>
    </div>
    <div class="sm-sman-rightInfo">
      <div>缓存箱信息</div>
      <ul>
        <li v-for="(value, index) in hcxInfo" :key="index">
          <p>待分拣物料信息</p>
          <p>
            缓存箱条码：<span style="margin-left: 3px">{{ value.workbinCode }}</span>
          </p>
          <p v-if="!value.mesCheckQualiticationId">
            条码：<span style="margin-left: 3px">{{ value.barcode }}</span>
          </p>
          <p v-if="value.mesCheckQualiticationId">
            合格证号：<span style="margin-left: 3px">{{ value.mesCheckQualiticationId }}</span>
          </p>
          <p>
            图号：<span style="margin-left: 3px">{{ value.itemCode }}</span>
          </p>
          <p>
            AO编号：<span style="margin-left: 3px" :class="backgroundColorList[index%3]">{{ value.aoCode }}</span>
          </p>
          <p>
            物料名称：<span style="margin-left: 3px">{{ value.itemName }}</span>
          </p>
          <p>
            质量编号：<span style="margin-left: 3px">{{
              value.qualityCode
            }}</span>
          </p>
          <p>
            库存数量：<span style="margin-left: 3px">{{ value.itemQty }}</span>
          </p>
          <p>
            待分拣数量：
            <span style="fontsize: 20px">
              <el-input
                @blur="blurNum(value.outQty, index)"
                ref="smsmaninput"
                size="mini"
                v-model="value.outQty"
                placeholder="请输入物料数量"
                @keyup.enter.native="handleTopInput"
              ></el-input>
            </span>
          </p>
          <p>物料确认状态：<span style="margin-left:3px" ref="materialStatus">{{isMaterial}}</span></p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "SortingManagementGoods",
  data() {
    return {
      hcxInfo: "",
      gzbInfo: "",
      qqlist: [],
      num:'',
      indexNumber:'',
      nowMaterial:'',
      newGzbList:[],
      isMaterial:'未确认',
      backgroundColorList:["color1","color2","color3"]
    };
  },
  methods: {
    // input聚焦
    blurNum(nums, index) {
      // console.log(nums, index);
      for (let i = 0; i < this.hcxInfo.length; i++) {
        if (index == i) {
          this.indexNumber = index
          this.num = nums
          this.maxNum = this.hcxInfo[i].itemQty
        }
      }
    },
    // 输入值后回车 聚焦topinput
      handleTopInput(){
        // 将修改的数据返给首页
        // console.log(this.gzbInfo)
        this.$bus.$emit('gzbListInfoss','re')
      },
  },
  mounted() {
      // 接收首页传来的缓存箱信息
      this.$bus.$on("smsmnSendHcxInfos", (e) => {
        for(let i=0;i<e.length;i++){
            e[i].outQty = e[i].itemQty
          }
        this.hcxInfo = e;
        
        console.log(e);
      });
      //
      this.$bus.$on("smsmnSendGzbInfo", (e) => {
        this.gzbInfo = e.prestoreMaterial;
      });
      // 接收首页物料扫码确认的下标 smsmaninput
      this.$bus.$on('smSmanMaterialNumber',(e)=>{
        // console.log(this.hcxInfo[e])
        this.nowMaterial = this.hcxInfo[e]
        this.$refs.materialStatus[e].style.color = 'blue'
        this.$refs.materialStatus[e].innerHTML = '已确认'
        this.gzbInfo = this.hcxInfo
        this.$bus.$emit('gzbListInfoss','re')
        this.$bus.$emit('smSmanListSave',this.hcxInfo)
        // this.$nextTick(()=>{
        //   this.$refs.smsmaninput[e].focus()
        //   console.log(this.$refs.smsmaninput)
        // })
      })
    },
    watch:{
      num(newValue,oldValue){
        this.qqlist = this.hcxInfo
        if(newValue*1 >= 1 && newValue*1 <= this.maxNum*1){
          // 多对一
          // 对工作包List 去重加入
          // this.$nextTick(()=>{
            // if(this.newGzbList.length !=0){
            //   for(let gi=0;gi<this.newGzbList.length;gi++){
            //     let giNum = 0
            //     if(this.nowMaterial.barcode !== this.newGzbList[gi].barcode){
            //       giNum++
            //       if(giNum == this.newGzbList.length){
            //         this.newGzbList.push(this.nowMaterial)
            //       }
            //     }
            //   }
            //   console.log(123)
            // }else{
            //   console.log(456)
            //   this.newGzbList.push(this.nowMaterial)
            // }
            // // this.newGzbList.push(this.nowMaterial)
            // console.log(this.newGzbList,'newGzbList')
          // })
          // 输入值符合规范 允许聚焦Topinput
          // this.toInput = true
          this.qqlist[this.indexNumber].outQty = newValue;
          this.gzbInfo = this.qqlist
          // console.log(this.gzbInfo)
          this.$bus.$emit('smSmanListSave',this.gzbInfo)
        }else {
           this.$Alert({
            title: "错误",
            message: '物料数量输入有误！',
            type: "error",
          });
          this.qqlist[this.indexNumber].outQty = this.maxNum;
          this.gzbInfo = this.qqlist
          this.$bus.$emit('smSmanListSave',this.gzbInfo)
          // 输入值有误 不允许聚焦Topinput
          // this.toInput = false
        }
      }
    }
}
</script>
<style scoped>
.sm-sman-smanagementGoods {
  width: 100%;
  /* background: red; */
}
.sm-sman-leftInfo {
  float: right;
  width: 50%;
  display: none;
  /* height: 300px; */
  /* border: 1px solid black; */
  /* background: #3375d7; */
}
.sm-sman-leftInfo ul li {
  float: left;
  padding: 0 10px;
  width: 280px;
  /* height: 330px; */
  /* background-color: rgb(200, 244, 244); */
  background: #ffffff;
  border-radius: 4px;
  box-shadow: inset 0px 0px 20px 0px #cccbcb;
  margin-left: 12px;
  margin-top: 8px;
  /* text-align: center; */
  border-radius: 10px;
}
.sm-sman-leftInfo ul li p:nth-child(1) {
  text-align: center;
}
.sm-sman-leftInfo ul li p {
  margin-top: 10px;
}

.sm-sman-rightInfo {
  float: left;
  width: 50%;
  /* background-color: aquamarine; */
  /* height: 400px; */
  display: none;
}
.sm-sman-rightInfo ul li {
  float: left;
  padding: 0 5px;
  width: 290px;
  /* height: 330px; */
  /* background-color: rgb(200, 244, 244); */
  background: #ffffff;
  border-radius: 4px;
  box-shadow: inset 0px 0px 20px 0px #cccbcb;
  margin-left: 12px;
  margin-top: 8px;
  /* text-align: center; */
  border-radius: 10px;
}
.sm-sman-rightInfo ul li p:nth-child(1) {
  text-align: center;
}
.sm-sman-rightInfo ul li p {
  margin-top: 10px;
}
.el-input {
  width: 180px;
  font-size: 18px;
}
.color1 {
  color: black;
}
.color2 {
  color: blue;
}
.color3 {
  color: green;
}
</style>